<template>
  <el-dialog title="施药信息" :visible.sync="visible">
    <el-form class="form">
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">员工姓名</label>
        <el-select v-model="formData.employeeId" class="sel2" placeholder="请选择" style="width: 186px;">
          <el-option v-for="item in employeeList" :key="item.employee_id" :label="item.employee_name"
            :value="item.employee_id" />
        </el-select>
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">农药名称</label>
        <el-input v-model="formData.pesticideName" class="in" style="width: 186px;" autocomplete="off" />
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">农药类型</label>
        <el-input v-model="formData.type" class="in" style="width: 186px;" autocomplete="off" />
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">农药用量</label>
        <el-input v-model="formData.dosage" class="in" style="width: 186px;" autocomplete="off" />
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">使用原因</label>
        <el-input v-model="formData.useReason" class="in" style="width: 186px;" autocomplete="off" />
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">使用后效果</label>
        <el-input v-model="formData.effect" class="in" style="width: 186px;" autocomplete="off" />
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">施药时间</label>
        <el-date-picker v-model="formData.gmtCreate" type="datetime" class="in" style="width: 186px;" autocomplete="off"
          placeholder="施药时间" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
      </div>
      <div style="margin-left:52px;margin-bottom:24px">
        <label style="height: 36px;line-height: 36px;padding: 0 12px 0 0;">备注</label>
        <el-input v-model="formData.remark" class="in" style="width: 186px;" autocomplete="off" />
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveAgriculturalControl } from '@/api/plant/agriculturalControl'
import { getAllEmployee } from "@/api/plant/employee"
import { plantTypeList } from "@/config/dict/trace"
export default {
  data () {
    return {
      visible: false,
      formData: {
        id: '',
        plantId:'',
        areaId: '',
        type:'',
        dosage:'',
        pesticideName:'',
        employeeId: '',
        employeeName: '',
        useReason: '',
        effect: '',
        remark: '',
        gmtCreate:''
      },
      plant: {},
      employeeList: [],
      plantTypeOption: plantTypeList
    }
  },
  methods: {
    async init (plant) {
      this.plant = plant
      this.visible = true
      this.formData = {
        id: '',
        plantId:'',
        areaId: '',
        type:'',
        dosage:'',
        pesticideName:'',
        employeeId: '',
        employeeName: '',
        useReason: '',
        effect: '',
        remark: '',
        gmtCreate:''
      }
      if(plant){
        this.formData.plantId = plant.id
        this.formData.areaId = plant.areaId
      }
      getAllEmployee().then(res => {
        this.employeeList = res.data
      })
    },
    confirm () {
      for (let i = 0; i < this.employeeList.length; i++) {
        const e = this.employeeList[i]
        if (e.employee_id == this.formData.employeeId) {
          this.formData.employeeName = e.employee_name
        }
      }
      saveAgriculturalControl(this.formData).then(response => {
        if (response.statusCode == 20000) {
          this.refresh()
          this.visible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，操作失败',
            type: 'warning'
          })
        }
      })
    },
    refresh () {
      this.$emit('refresh')
    }
  }
}
</script>

<style>
.form {
  margin-bottom: 20px;
}
</style>
